<template>
  <div>
    <div>省：
      <el-select filterable v-model="province" placeholder="请选择">
        <el-option v-for="(item, key) in provinces" :key="key" :label="item.province" :value="key"></el-option>
      </el-select>
    </div>
    <div v-if="citys != null">市：
      <el-select v-model="city" placeholder="请选择">
        <el-option v-for="(item, key) in citys" :key="key" :label="item.city" :value="key"></el-option>
      </el-select>
    </div>
    <div v-if="countys != null">县：
      <el-select v-model="county" placeholder="请选择">
        <el-option v-for="(item, key) in countys" :key="key" :label="item" :value="key"></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import City from "../../public/city";

export default {
  name: "Address",
  data() {
    return {
      provinces: null,
      countys: null,
      citys: null,
      province: null,
      city: null,
      county: null
    };
  },
  created() {
    let city = new City();
    this.provinces = city.getProvince();
  },
  watch: {
    province: function(newValue, oldValue) {
      this.provinceChange(newValue);
      let keys = Object.keys(this.citys);
      if (keys.length === 1) {
        this.city = keys[0];
      } else {
        this.city = null;
      }
      this.county = null;
    },
    city: function(newValue, oldValue) {
      this.cityChange(newValue);
      this.county = null;
    }
  },
  methods: {
    provinceChange: function(provinceId) {
      this.citys = this.provinces[provinceId]["citys"];
    },
    cityChange: function(cityId) {
      this.countys = this.citys[cityId]["countys"];
    }
  }
};
</script>

<style scoped>
</style>